<template>
    <div>
        <div class=" row mb-1">
            <div class="rongliang" :style="{ width: '250px' }">
                团队容量：{{ useflow.usesize }} / {{ useflow.size }}
            </div>
            <div class="col col-progress">
                <el-progress :percentage="useflow.percentagesize" />
            </div>
            <div class="rongliang" :style="{ width: '250px' }">
                团队流量：{{ useflow.useflow }} / {{ useflow.flow }}
            </div>
            <div class="col col-progress">
                <el-progress :percentage="useflow.percentageflow" />
            </div>

        </div>
        <div class=" row mb-1">
            <div class="col">
                <el-button @click="dialogVisible = true" type="primary">设置</el-button>
            </div>
        </div>

        <el-table v-loading="loading" :data="tableDate" border height="65vh" style="width: 100%">
            <el-table-column prop="ID" label="ID"></el-table-column>
            <el-table-column prop="name" label="名称"></el-table-column>
            <el-table-column prop="type" label="类型" width=""></el-table-column>
            <el-table-column prop="size" label="大小" width=""
                :formatter="({ size }) => renderSize(Number(size))"></el-table-column>
            <el-table-column prop="createdAt" width="" sortable="custom"
                :formatter="({ createdAt }) => TimeYH(createdAt)" label="上传时间"></el-table-column>
            <el-table-column prop="state" label="下载" width="">
                <template #default="scope">
                    <el-button size="default" type="primary" @click="download(scope.row)">
                        下载
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination class="pager" :page-size="limit" :total="count" @current-change="change"
            layout="prev, pager, next" :current-page="Math.floor(offset / limit) + 1"></el-pagination>
        <el-dialog title="设置存储空间" v-model="dialogVisible" width="600">
            <template #header>
                <span class="icon-text el-dialog__header-title">
                    <el-icon class="text-primary">
                        <Guide />
                    </el-icon>
                    设置存储空间
                </span>
            </template>
            <el-form :model="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="存储空间">
                    <el-input-number v-model="ruleForm.size" :min="0" :max="1099511627776" :step="1"
                        :style="{ width: '350px' }"></el-input-number>
                    &nbsp;
                    {{ renderSize(Number(ruleForm.size)) }}
                </el-form-item>
                <el-form-item label="每月流量">
                    <el-input-number v-model="ruleForm.flow" :min="0" :max="1099511627776" :step="1"
                        :style="{ width: '350px' }"></el-input-number>
                    &nbsp;
                    {{ renderSize(Number(ruleForm.flow)) }}
                </el-form-item>
                <el-form-item label="已使用流量">
                    <el-input-number v-model="ruleForm.useflow" :min="0" :max="1099511627776" :step="1"
                        :style="{ width: '350px' }"></el-input-number>
                    &nbsp;
                    {{ renderSize(Number(ruleForm.useflow)) }}
                </el-form-item>
                <el-form-item label="已使用空间">
                    <el-input-number disabled v-model="ruleForm.usesize" :min="0" :max="1099511627776" :step="1"
                        :style="{ width: '350px' }"></el-input-number>
                    &nbsp;
                    {{ renderSize(Number(ruleForm.usesize)) }}
                </el-form-item>

                <div class="row">
                    <div class="col text-right">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="submit">确 定</el-button>
                    </div>
                </div>
            </el-form>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import OSS from 'ali-oss';
import { ElButton, } from 'element-plus';
import { debounce } from 'underscore';
import { computed, onMounted, reactive, ref, watch } from 'vue';
import { asyncadmingetteamfile, asyncadmingetteamflow, asyncadminupdateteamflow, ossupload } from '../../../api';
import Studycodemodel from '../../../mysql_interface/studycodemodel';
import { TimeYH } from '../../../util/time';
const p = defineProps<{
    team: Studycodemodel.Iteam,
    ID: any
}>()

const dialogVisible = ref(false)

const tableDate = ref<Studycodemodel.Iteamfile[]>([])


const ruleForm = reactive<Studycodemodel.Iteamflow>({
    usesize: 0, size: 1021 * 1024 * 1024 * 5, flow: 1021 * 1024 * 1024 * 10, useflow: 0,
    teamid: p.ID
})

const useflow = computed(() => {
    const { usesize = 0, size = 1021 * 1024 * 1024 * 5, flow = 1021 * 1024 * 1024 * 10, useflow = 0 } = ruleForm
    return {
        size: renderSize(size),
        usesize: renderSize(usesize),
        flow: renderSize(flow),
        useflow: renderSize(useflow),
        percentageflow: Math.floor(useflow / flow * 100),
        percentagesize: Math.floor(usesize / size * 100),
        _usesize: usesize,
        _size: size,
        _flow: flow,
        _useflow: useflow,
    }
})



async function download(name: Studycodemodel.Iteamfile) {
    const data = o.value?.signatureUrl(String(name.url), {
        expires: 3600
    })
    window.open(data, '_blank')
}



function renderSize(value: number) {
    if (!value) {
        return "0 Bytes";
    }
    var unitArr = new Array("Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB");
    var index = 0;
    var srcsize = parseFloat(String(value));
    index = Math.floor(Math.log(srcsize) / Math.log(1024));
    var size = srcsize / Math.pow(1024, index);
    return size.toFixed(2) + unitArr[index];
}


const count = ref(0)
const offset = ref(0);
const limit = ref(20);
const loading = ref(false)
const name = ref('')
function debounce1() {
    return debounce(() => {
        let _like: [keyof Studycodemodel.Iteamfile, any] | undefined;
        if (name.value) {
            _like = ["name", name.value];
        }
        loading.value = true
        asyncadmingetteamfile({
            _offset: offset.value,
            _limit: limit.value,
            _like,
            teamid: p.ID,
        }).then(e => {
            loading.value = false
            tableDate.value = e.rows
            count.value = e.count
        })
    }, 300);
}
const start = debounce1();

watch([offset, limit, name], (e, r) => {
    start();
});

const o = ref<OSS>()


async function setflow() {
    try {
        const d = await asyncadmingetteamflow({ teamid: p.ID })
        Object.assign(ruleForm, d)
    } catch (e) {
        console.log(e)
    }
}

onMounted(async () => {
    setflow()
    const res = await ossupload()
    o.value = new OSS({
        region: "oss-cn-qingdao",
        accessKeyId: res.accessKeyId,
        accessKeySecret: res.accessKeySecret,
        stsToken: res.securityToken,
        bucket: 'ojteam',
        refreshSTSToken: async () => {
            const info = await ossupload();
            return {
                accessKeyId: info.accessKeyId,
                accessKeySecret: info.accessKeySecret,
                stsToken: info.securityToken
            }
        }

    })
    start()
})

async function submit() {
    await asyncadminupdateteamflow(ruleForm)
    dialogVisible.value = false
    setflow()
}


function change(r: number) {
    offset.value = (r - 1) * 10;
}


</script>

<style scoped>
.text-right {
    text-align: right;
}

.d-inline-block {
    display: inline-block;
}

.header {
    padding-top: 10px;
}

.container-xl {
    --bs-gutter-x: 0, --my-home-div-height: 56px;
}

.min-height {
    --bs-gutter-x: 0
}

.rongliang {
    color: rgba(0, 0, 0, 0.45);
    font-weight: 400;
    font-size: 14px;
}

.col-progress {
    align-items: center;
}
</style>